<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>k15work2</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <style>
        ul{
            list-style-type: none;
        }
        ul>li{
            float: left;
            margin-right: 20px;
        }
        ul>li a{
            text-decoration: none;
            color: black;
        }
        .show1{
            clear: both;
            margin-left: 40px;
            border: 1px dotted blue;
            width: 1200px;
        }
        .div1{
            float: left;
            text-align: center;
            width: 230px;
            margin-top: 50px;
            margin-left: 30px;
            border: 1px dotted;
            border-radius: 20px;
            background-color: honeydew;
        }
        .div1 div{
            margin: 10px;
            color: black;
        }
        .myimg{
            border-radius: 10px;
        }
        .myimg:hover{
            transform: scale(1.1);
            transform-style: preserve-3d;
            transition: 500ms;
            transform: rotate3d(10);
        }
        .div2{
            font-size:large;
        }
        .div2:hover{
            color: orangered;
        }
        .allcourses{
            width: 270px;
            height: 220px;
            border: 1px dotted;
            text-align: center;
            background-color: honeydew;
            border-radius: 20px;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="margin-left: 400px;">
            <ul>
                <li><router-link to="/homePage">首页</router-link></li>
                <li><router-link to="/course">课程</router-link></li>
                <li><router-link to="/teacher">名师</router-link></li>
            </ul>
        </div>
        <div class="show1">
            <router-view></router-view>
        </div>
    </div>
    <template id="homePageTpl">
        <div>
            <h1>首页内容</h1>
        </div>
    </template>
    <template id="courseTpl">
        <div>
            <div>
                <h3>全部课程</h3>
            </div>
            <div style="clear: both;">
                <hr style="color: ghostwhite;">
            </div>
            <div>
                <ul>
                    <li>按年级</li>
                    <li><router-link to="/course/allGradeCourse">全部</router-link></li>
                    <li><router-link to="/course/firstGradeCourse">一年级</router-link></li>
                    <li>二年级</li>
                    <li>三年级</li>
                    <li>四年级</li>
                    <li>五年级</li>
                    <li>六年级</li>
                </ul>
            </div>
            <div style="clear: both;">
                <hr style="color: ghostwhite;">
            </div>
            <div>
                <ul>
                    <li>按学科</li>
                    <li>全部</li>
                    <li><router-link to="/course/mathCourse">数学</router-link></li>
                    <li>语文</li>
                    <li>英语</li>
                </ul>
            </div>
            <div style="clear: both;">
                <hr style="color: ghostwhite;">
            </div>
            <div class="show2">
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="teacherTpl">
        <div>
            <div>
                <div style="float: left;">
                    <h3>全部讲师</h3>
                </div>
                <div style="float: left;margin-left: 450px;">
                    <ul>
                        <li><router-link to="/teacher/totalTeacher">全部</router-link></li>
                        <li><router-link to="/teacher/chineseTeacher">语文</router-link></li>
                        <li><router-link to="/teacher/mathTeacher">数学</router-link></li>
                    </ul>
                </div>
            </div>
            <div style="clear: both;">
                <hr style="color: ghostwhite;">
            </div>
            <div class="show2">
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="totalTeacherTpl">
        <div>
            <div class="div1" v-for="totalTeacher in totalTeachers">
                <div>
                    <img :src="totalTeacher.headimg" alt="" width="150px" height="170px" class="myimg">
                </div>
                <div class="div2">
                    {{totalTeacher.name}}
                </div>
                <div>
                    {{totalTeacher.eduexpe}}
                </div>
                <hr style="color: ghostwhite;width: 200px;">
                <div>
                    {{totalTeacher.workexpe}}
                </div>
            </div>
        </div>
    </template>
    <template id="chineseTeacherTpl">
        <div>
            <h1>语文</h1>
        </div>
    </template>
    <template id="mathTeacherTpl">
        <div>
            <h1>数学</h1>
        </div>
    </template>
    <template id="firstGradeCourseTpl">
        <div>
            <h1>一年级课程</h1>
        </div>
    </template>
    <template id="allGradeCourseTpl">
        <div>
            <div class="allcourses" v-for="allCourse in allCourses">
                <div style="margin-top: 10px;">
                    <img :src="allCourse.courseimg" alt="" width="250px" height="140px" style="border-radius: 10px;">
                </div>
                <div style="font-size: 20px;font-weight: bold;">{{allCourse.title}}</div>
                <div style="margin-top:10px;">
                    <div style="float:left;margin-left: 15px;width: 140px;font-size: 12px;">{{allCourse.studynum}}人学习|{{allCourse.commentnum}}人评论</div>
                    <div style="float:right;margin-right: 15px;">
                        <button style="background-color: green;color: white;" v-if="allCourse.isfree==1">免费</button>
                        <button style="background-color: red;color: white;" v-if="allCourse.isfree==0">付费</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="mathCourseTpl">
        <div>
            <h1>数学课程</h1>
        </div>
    </template>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        router:new VueRouter({
            routes:[
                {
                    path:'/homePage',
                    component:{
                        template:'#homePageTpl'
                    }
                },
                {
                    path:'/course',
                    component:{
                        template:'#courseTpl'
                    },
                    children:[
                        {
                            path:'allGradeCourse',
                            component:{
                                template:'#allGradeCourseTpl',
                                data:function(){
                                    return{
                                        allCourses:[
                                            {courseimg:"../images/model1.png",title:"java基础1",studynum:"1234",commentnum:"4321",isfree:1},
                                            {courseimg:"../images/model2.jpg",title:"java基础2",studynum:"1235",commentnum:"4322",isfree:0},
                                            {courseimg:"../images/model1.png",title:"java基础3",studynum:"1236",commentnum:"4323",isfree:1},
                                            {courseimg:"../images/model2.jpg",title:"java基础4",studynum:"1237",commentnum:"4324",isfree:0}
                                        ]
                                    }
                                }
                            }
                        },
                        {
                            path:'firstGradeCourse',
                            component:{
                                template:'#firstGradeCourseTpl'
                            }
                        },
                        {
                            path:'mathCourse',
                            component:{
                                template:'#mathCourseTpl'
                            }
                        }
                    ]
                },
                {
                    path:'/teacher',
                    component:{
                        template:'#teacherTpl'
                    },
                    children:[
                        {
                            path:'totalTeacher',
                            component:{
                                template:'#totalTeacherTpl',
                                data:function(){
                                    return{
                                        totalTeachers:[
                                            {headimg:"../images/model6.jpg",name:"智子",eduexpe:"教育经历1",workexpe:"工作经历1"},
                                            {headimg:"../images/model2.jpg",name:"汪淼",eduexpe:"教育经历2",workexpe:"工作经历2"},
                                            {headimg:"../images/model5.jpg",name:"史强",eduexpe:"教育经历3",workexpe:"工作经历3"},
                                            {headimg:"../images/model4.jpg",name:"文王",eduexpe:"教育经历4",workexpe:"工作经历4"},
                                            {headimg:"../images/model6.jpg",name:"智子",eduexpe:"教育经历1",workexpe:"工作经历1"},
                                            {headimg:"../images/model2.jpg",name:"汪淼",eduexpe:"教育经历2",workexpe:"工作经历2"},
                                            {headimg:"../images/model5.jpg",name:"史强",eduexpe:"教育经历3",workexpe:"工作经历3"},
                                            {headimg:"../images/model4.jpg",name:"文王",eduexpe:"教育经历4",workexpe:"工作经历4"}
                                        ]
                                    }
                                }
                            }
                        },
                        {
                            path:'chineseTeacher',
                            component:{
                                template:'#chineseTeacherTpl'
                            }
                        },
                        {
                            path:'mathTeacher',
                            component:{
                                template:'#mathTeacherTpl'
                            }
                        }
                    ]
                }
            ]
        })
    });
</script>